<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.tu1 {
				/* 盒子大小计算方案1：内容盒子 */
				box-sizing: content-box;  /*默认值*/
				width: 200px;    /*此处的宽度只包含内容*/
				margin: 10px;
				border: 20px solid #00f;
				padding: 30px;
			}
			.tu2 {
				/* 盒子大小计算方案2：边框盒子 */
				box-sizing: border-box;
				width: 200px;    /*此处的宽度包含：边框+内边距+内容*/
				margin: 10px;
				border: 20px solid #00f;
				padding: 30px;
			}
		</style>
	</head>
	<body>
		<!-- 盒子模型总尺寸计算方案1：内容盒子 -->
		<img class="tu1" src="img/2.jpg">
		<br>
		<!-- 盒子模型总尺寸计算方案2：边框盒子 -->
		<img class="tu2" src="img/2.jpg">
	</body>
</html>
